<template>
  <view class="page">
    <scroll-view style="height: 100%" scroll-y="true" scroll-with-animation="true">
      <view class="statusTitle">
        {{ valueOf(orderInfo.orderStatus).chineseName }}
      </view>
      <view class="cntStatus">
        <view v-if="orderInfo.orderStatus === 1" style="color:#95949D">
          订单已关闭
        </view>
        <view v-if="orderInfo.orderStatus === 2" style="color: #95949D">
          订单已支付
        </view>
        <view v-if="orderInfo.orderStatus === 0" style="color:#95949D">
          请在
          <uni-countdown style="display: inline-block" :show-day="false" :font-size="12" color="#FF3D71"
                         :show-hour="false" :minute="overTime[0]" :second="overTime[1]" @timeup="timeUp"/>
          内完成付款，逾期将取消订单
        </view>
      </view>
      <view class="performanceInfo">
        <view class="left">
          <view class="title">
            {{ orderInfo.performanceTitle }}
          </view>
          <view class="showTime">
            {{ formatDateTime2WeekDate(orderInfo.showTime) }}
          </view>
          <view class="venueName">
            {{ orderInfo.venueName }}
          </view>
          <view class="venueName">
            <span>票品提供: 熊熊票务 </span>
          </view>
          <view class="ticket">
            {{ orderInfo.ticketName }} × {{ orderInfo.ticketCount }}张
          </view>
        </view>

        <view class="right">
          <view class="image">
            <image :src="orderInfo.performanceCoverUrl" class="imagerUrl"></image>
          </view>
        </view>

      </view>
      <view class="e-ticket">
        <view class="typeTitle">
          <view>
            电子票
          </view>
          <view v-if="orderInfo.orderStatus === 2" class="icon" @click="openEwm(orderInfo.orderId)">
            <image src="../../static/icons/ewm.png" mode=""></image>
          </view>
        </view>
        <view class="intro">
          <uni-icons type="location-filled" size="12" color="a9a9a9" style="margin-right: 4px;"></uni-icons>
          {{ orderInfo.venueName }}
        </view>
        <view class="intro">
          <uni-icons type="calendar-filled" size="12" color="a9a9a9" style="margin-right: 4px;"></uni-icons>
          演出开场前1小时
        </view>
        <view class="intro">
          说明：根据商家短信提示入场
        </view>
        <view class="line"></view>
        <view class="intro" style="color: black">
          {{ orderInfo.recipientName + ' ' + orderInfo.recipientPhoneNumber }}
        </view>
      </view>
      <view class="spectatorInfo">
        <view class="typeTitle">
          观影人信息
        </view>
        <view class="spectatorItem" v-for="(item,index) in orderInfo.spectatorList" :key="index">
          <view class="alineInfo">
            <view>
              名称
            </view>
            <view>
              {{ item.spectatorName }}
            </view>
          </view>
          <view class="alineInfo">
            <view>
              证件号
            </view>
            <view>
              {{ item.certificateNumber }}
            </view>
          </view>
          <view class="alineInfo">
            <view>
              持票人手机号
            </view>
            <view>
              {{ item.spectatorPhoneNumber }}
            </view>
          </view>
        </view>
      </view>

      <view class="ticketInfo">
        <view class="typeTitle">
          订单明细
        </view>
        <view class="alineInfo">
          <view>
            代收票款
          </view>
          <view>
            {{ orderInfo.payAmount }}元
          </view>
        </view>
        <view class="alineInfo">
          <view>
            服务费
          </view>
          <view>
            0元
          </view>
        </view>
        <view class="alineInfo">
          <view>
            合计
          </view>
          <view>
            {{ orderInfo.payAmount }}元
          </view>
        </view>
      </view>

      <view class="orderInfo">
        <view class="typeTitle">
          订单信息
        </view>
        <view class="alineInfo">
          <view>
            订单编号
          </view>
          <view>
            {{ orderInfo.orderId }}
          </view>
        </view>
        <view class="alineInfo">
          <view>
            下单时间
          </view>
          <view>
            {{ orderInfo.orderTime }}
          </view>
        </view>
        <view class="alineInfo">
          <view>
            支付时间
          </view>
          <view v-if="orderInfo.orderStatus === 2">
            {{ orderInfo.payTime }}
          </view>
        </view>
      </view>


      <uni-popup ref="warning" type="dialog">
        <uni-popup-dialog cancelText="取消" confirmText="确定" title="订单支付提醒"
                          :content="'是否支付【'+orderInfo.payAmount+'元】'"
                          @confirm="doPay"></uni-popup-dialog>
      </uni-popup>
      <uni-popup ref="cancelWarning" type="dialog">
        <uni-popup-dialog cancelText="取消" confirmText="确定" title="订单取消提醒"
                          :content="'是否取消订单:' + orderInfo.orderId"
                          @confirm="doCancel"></uni-popup-dialog>
      </uni-popup>
      <uni-popup ref="QR" type="dialog">
        <uv-qrcode ref="qrcode" canvas-id="qrcode" :value="QRValue" size="300rpx" :loading="loading"
                   :options="options"></uv-qrcode>
      </uni-popup>
    </scroll-view>
    <view class="bottomBox">
      <view class="btnGroup">
        <button class="btn" style="border-color:rgb(217,217,217); color:rgb(115,115,115)" plain>
          咨询投诉
        </button>
        <button v-if="orderInfo.orderStatus === 0" class="btn" style="color:#FF3D71;border-color:#FF3D71" plain
                @click="openPay">
          立即支付
        </button>
        <button v-if="orderInfo.orderStatus === 0" style="border-color:rgb(217,217,217); color:rgb(115,115,115)"
                class="btn" plain
                @click="openCancel">
          取消订单
        </button>
      </view>
    </view>
  </view>
</template>

<script>
import {cancelOrder, getOrderInfo, payTicketOrder} from "../../api/user/order";
import {valueOf} from "../../utils/OrderStatusUtil";
import {formatDateTime2WeekDate, getOverTime} from "../../utils/DateUtils";
import UvQrcode from "../../uni_modules/uv-qrcode/components/uv-qrcode/uv-qrcode.vue";

export default {
  components: {UvQrcode},
  onShow() {
    let routes = getCurrentPages(); // 获取当前打开过的页面路由数组
    let curParam = routes[routes.length - 1].options; //获取路由参数
    this.orderId = curParam.orderId;
    this.init();
  },
  data() {
    return {
      orderId: null,
      orderInfo: {},
      overTime: [100, 100],
      options: {
        useDynamicSize: false,
        errorCorrectLevel: 'Q',
        margin: 10,
        areaColor: "#fff",
      },
      QRValue: 'null',
    }
  },
  methods: {
    formatDateTime2WeekDate,
    valueOf,
    init() {
      getOrderInfo(this.orderId).then(res => {
        this.orderInfo = res.data;
        this.overTime = getOverTime(this.orderInfo.orderTime);
      })
    },
    timeUp() {
      getOrderInfo(this.orderId).then(res => {
        this.orderInfo = res.data;
      })
    },
    openPay() {
      this.$refs.warning.open();
    },
    openCancel() {
      this.$refs.cancelWarning.open();
    },
    doPay() {
      payTicketOrder(this.orderInfo.payOrderId).then(res => {
        if (res.success) {
          this.init();
          wx.showToast({title: '支付成功！', icon: "success", duration: 2000,});
        }
      })
    },
    doCancel() {
      cancelOrder(this.orderInfo.orderId).then(res => {
        if (res.success) {
          this.init();
          wx.showToast({title: '取消成功！', icon: "success", duration: 2000,});
        }
      })
    },
    openEwm(orderId) {
      this.QRValue = orderId;
      this.$refs.QR.open();
    },
  }
}
</script>

<style lang="scss">
.page {
  height: calc(100% - 100upx);
  background-color: #FAF7FA;
}

.icon {
  width: 48rpx;
  height: 48rpx;
  display: inline-block;
  margin-left: 20rpx;

  image {
    width: 100%;
    height: 100%;
  }
}

.typeTitle {
  display: flex;
  font-size: 17px;
  font-weight: bold;
  margin-bottom: 20px;
}

.statusTitle {
  padding: 15px;
  background-color: #D4237A;
  color: white;
  font-size: 23px;
  height: 30px;
  width: 100%;
}

.cntStatus {
  padding: 15px;
  background-color: white;
  font-size: 14px;
  margin-bottom: 8px;
}

.performanceInfo {
  padding: 20px;
  display: flex;
  justify-content: space-between;
  background-color: white;

  .left {
    width: 70%;

    .title {
      margin-bottom: 10rpx;
      font-size: 17px;
      width: 100%;
    }


    .showTime {
      margin-bottom: 3px;
      font-size: 14px;
      color: #a8a8a8;
    }

    .venueName {
      margin-bottom: 3px;
      font-size: 14px;
      color: #a8a8a8;
    }

    .ticket {
      font-size: 14px;
      margin-top: 10px;
    }
  }

  .right {
    width: 25%;
    margin-left: 5px;

    .image {
      width: 100%;
      height: 200rpx;
      overflow: hidden;

      .imagerUrl {
        width: 100%;
        height: 100%;
      }
    }
  }


}

.e-ticket {
  margin-top: 10px;
  background-color: white;
  padding: 20px;

  .intro {
    margin-top: 10px;
    font-size: 14px;
    color: #9b9b9b;
  }
}

.spectatorInfo {
  margin-top: 10px;
  background-color: white;
  padding: 20px;

  .spectatorItem {
    margin: 10px 0;
  }
}

.ticketInfo {
  margin-top: 10px;
  background-color: white;
  padding: 20px;
}

.orderInfo {
  margin-top: 10px;
  background-color: white;
  padding: 20px;
}

.alineInfo {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  font-size: 14px;
  color: #a8a8a8;
}


.bottomBox {
  position: fixed;
  padding: 5px;
  left: 0;
  bottom: 0;
  z-index: 99;
  width: 100%;
  height: 75upx;
  background-color: #ffffff;
  border-top: 1px solid #e5e5e5;

  .btnGroup {
    text-align: right;

    .btn {
      display: inline-block;
      border-radius: 24px;
      width: 100px;
      margin-right: 15px;
      font-size: 13px;
    }
  }
}

.line {
  background-color: rgba(229, 229, 229, 0.79);
  margin: 10px 0;
  width: 100%;
  height: 1px;
}
</style>
